<template>
<section style="padding:0;">
<div>
    <div v-show="showMapNum==0" id="allmap1" style="height:100vh;width: 100vw;overflow: hidden;" ref="allmap1"></div>
    <div v-show="showMapNum==1" id="allmap2" style="height:100vh;width: 100vw;overflow: hidden;" ref="allmap2"></div>
    
    <el-row style="color:#fff;width: 100%;position: absolute;left: 0;top: 0;height: 0;margin-top: 10px;">
        <!-- 左边 -->
        <el-col :span="4" class="content-padding">
            <div class="content-background2">
                <div class="content-background">
                    <div class="grid-back-title" style="color: #fff;font-size: 14px;font-weight: bold;text-indent: 5px;padding: 10px 0;">环卫车辆在线数统计</div>
                    <!-- <div id="vertical" :span="24" style="width:100%; height:135px; float: left;"></div> -->
                    <div style="overflow: hidden;">
                        <el-col :span="18">
                            <echar-component v-if="device_mylist" :charlist="device_mylist" seriesName="环卫车辆设备在线数统计" echarsId="carId" nolineName="在线" offlineName="离线"></echar-component>
                        </el-col>
                        <el-col :span="6">
                            <div class="device_item_list">在线<span>{{device_mylist.onlineCount}}</span> ({{percentageCount(device_mylist.onlineCount,device_mylist.totalCount)}}%) </div>
                            <div class="device_item_list">离线<span>{{device_mylist.offlineCount}}</span> ({{percentageCount(device_mylist.offlineCount,device_mylist.totalCount)}}%)</div>
                            <div class="device_item_list">总数<span>{{device_mylist.totalCount}}</span></div>
                        </el-col>
                    </div>
                    <div class="grid-back-title" style="color: #fff;font-size: 14px;font-weight: bold;text-indent: 5px;padding: 10px 0;">手表在线数统计</div>
                    <div style="overflow: hidden;">
                        <el-col :span="18">
                            <echar-component v-if="watchList" :charlist="watchList" seriesName="手表设备在线数统计" echarsId="watchId" nolineName="在线" offlineName="离线"></echar-component>
                        </el-col>
                        <el-col :span="6">
                            <div class="device_item_list">在线<span>{{watchList.onlineCount}}</span> ({{percentageCount(watchList.onlineCount,watchList.totalCount)}}%) </div>
                            <div class="device_item_list">离线<span>{{watchList.offlineCount}}</span> ({{percentageCount(watchList.offlineCount,watchList.totalCount)}}%)</div>
                            <div class="device_item_list">总数<span>{{watchList.totalCount}}</span></div>
                        </el-col>
                    </div>
                </div>
            </div>
            <div class="content-background2" style="margin-top: 5px;">
                <div class="content-background" style="height: 150px;">
                    <div class="grid-back-title" style="color: #fff;font-size: 14px;font-weight: bold;text-indent: 5px;padding: 10px 0;">问题处理统计</div>
                    <echar-component v-if="processedNum&&unprocessedNum" :charlist="orderList" seriesName="问题处理统计" echarsId="orderId" nolineName="已处理" offlineName="未处理"></echar-component>
                    <div class="device_item_list">未处理<span>{{processedNum}}</span> ({{percentageCount(processedNum,allProcessedNum)}}%) </div>
                    <div class="device_item_list">已处理<span>{{unprocessedNum}}</span> ({{percentageCount(unprocessedNum,allProcessedNum)}}%)</div>
                    <div class="device_item_list">总数<span>{{allProcessedNum}}</span></div>
                    <!-- <div class="scroll">
                        <list-scroll class="box" :speed="1">
                          <div class="list">
                            <div class="item" v-for="item in testlist" :key="item.xh">
                              <span>{{ item.xh }}</span
                              ><span>{{ item.label }}</span>
                            </div>
                          </div>
                        </list-scroll>
                      </div> -->
                </div>
            </div>
            <div class="content-background2" style="margin-top: 5px;">
                <!-- <div class="content-background">
                    <div class="grid-back-title" style="color: #fff;font-size: 14px;font-weight: bold;text-indent: 5px;padding: 10px 0;">手表在线数统计</div>
                    <echar-component v-if="watchList" :charlist="watchList" seriesName="手表设备在线数统计" echarsId="watchId" nolineName="在线" offlineName="离线"></echar-component>
                    <div class="device_item_list">在线<span>{{watchList.onlineCount}}</span> ({{percentageCount(watchList.onlineCount,watchList.totalCount)}}%) </div>
                    <div class="device_item_list">离线<span>{{watchList.offlineCount}}</span> ({{percentageCount(watchList.offlineCount,watchList.totalCount)}}%)</div>
                    <div class="device_item_list">总数<span>{{watchList.totalCount}}</span></div>
                </div> -->
                <div class="content-background" style="padding-bottom: 20px;padding-top: 20px;min-height: 30vh;">
                    <ul class="ul-unprocessed-list">
                        <li class="grid-back-title" style="padding-bottom:10px;font-size: 14px;font-weight: bold">未处理问题</li>
                        <li v-for="(item,index) in processedList" :key="index" class="unprocessed-list" @click="showDetail(item)">
                            <div style="overflow:hidden;padding-left: 10px;">标题：{{item.title}}</div>
                            <div style="overflow:hidden;padding-left: 10px;text-overflow: ellipsis;white-space: nowrap;color: #bdbdbd;font-size: 12px;">内容：{{item.content}}</div>
                            <div style="overflow:hidden;padding-left: 10px;color: #bdbdbd;font-size: 12px;">时间：{{item.createTime}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            
        </el-col>
        <!-- 中间地图部分 -->
        <el-col :span="16">
            <div style="width: 100%;position: relative;">
                <el-col :span="4">
                    <div style="color:#fff;">
                        <el-select class="track-map-sel" v-model="companyId" clearable filterable placeholder="请选择组织" style="width: 90%;" @change="select_scade1">
                            <el-option v-for="item in firmlist" :key="item.companyId" :label="item.name" :value="item.companyId" >
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="4" v-show="showMapNum==1">
                    <div style="color:#fff;">
                        <el-select class="track-map-sel" v-model="onlineState" clearable placeholder="请选择在线离线" style="width: 90%;">
                            <el-option label="在线" :value="1"></el-option>
                            <el-option label="离线" :value="0"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="5" v-if="showMapNum==0">
                    <div style="color:#fff;">
                        <el-select class="track-map-sel" v-model="trajectorys" clearable multiple collapse-tags filterable placeholder="请选择" style="width: 90%;" @change="select">
                        <el-option v-for="item in options" :key="item.deviceId" :label="item.name" :value="item.deviceId">
                        </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="7" v-if="showMapNum==0">
                    <el-date-picker class="track-map-sel" v-model="selData" style="width:90%" @change="second1()"  
                        type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions" :default-time="['12:00:00', '08:00:00']">
                    </el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-button size="mini1"  style="background: #2d476e;border: #2d476e;color:#fff;height:40px;" @click="trackGet()">
                        查询
                    </el-button>
                </el-col>
                <el-col :span="5" style="float:right;position: relative;">
                    <div style="display: inline-block;position: absolute;left: -50px;top: 0;" v-if="showMapNum==1">
                        <el-switch v-model="showrange" active-color="#39557e" @change="changeShowRange" style="scale: 0.7;"></el-switch>
                        <span style="font-size: 12px;">是否显示围栏</span> 
                    </div>
                    <el-radio-group size="mini" v-model="showMapNum" @input="selectMap" text-color="#fff" fill="#39557e" style="float:right;">
                        <el-radio-button :label="1">分布图</el-radio-button>
                        <el-radio-button :label="0">轨迹图</el-radio-button>
                    </el-radio-group>
                </el-col>

                <!-- 阴影部分显示各个图标对应工种 -->
                <div style="position: absolute;left: 0;top: 50px;background-color: rgba(0, 0, 0, .3);padding: 10px 20px;border-radius: 5px;" v-if="showMapNum==1">
                    <div class="jobs" style="margin:0;">
                        <img src="../../assets/mapPoint/cleaneronline.svg" alt=""></img>
                        <span class="jobname">环卫人员</span>
                    </div>
                    <div class="jobs">
                        <img src="../../assets/mapPoint/onlineper.svg" alt=""></img>
                        <span class="jobname">绿化人员</span>
                    </div>
                    <div class="jobs">
                        <img src="../../assets/mapPoint/safeonline.svg" alt=""></img>
                        <span class="jobname">安保人员</span>
                    </div>
                    <div class="jobs">
                        <img src="../../assets/mapPoint/onlinesiji15.svg" alt=""></img>
                        <span class="jobname">环卫司机</span>
                    </div>
                    <div class="jobs">
                        <img src="../../assets/mapPoint/onlinecar.svg" alt=""></img>
                        <span class="jobname">环卫车辆</span>
                    </div>
                </div>
                <!-- 阴影部分显示各个图标对应工种 -->
                <!-- <div style="position: absolute;right: 0;top: 50px;background-color: rgba(255, 255, 255, .3);padding: 10px 20px;border-radius: 5px;" v-if="showMapNum==1"> -->
                <div style="position: absolute;right: 0;top: 50px;background-color: rgba(0, 0, 0, .3);padding: 10px 20px;border-radius: 5px;" v-if="showMapNum==1&&showrange&&rangeList.length>0">
                    <div class="jobs" style="margin:0;display: flex;justify-content: space-between;" v-for="(item,index) in rangeList" :key="index">
                        <span class="color-block" :style="{backgroundColor: item.rangeStyle.fillColor}"></span>
                        <span class="jobname">{{item.name}}</span>
                    </div>
                </div>
            </div>       
        </el-col>    
        <!-- 右边 -->
        <el-col :span="4" class="content-padding">
            
            <div class="content-background2">
            <div class="content-background" style="padding-bottom: 20px;padding-top: 20px;min-height: 84vh;">
                <div class="grid-back-title" style="padding-bottom:10px;font-size: 14px;font-weight: bold">人员列表</div>
                <!-- <div style="display: flex;justify-content: space-between;"> -->
                    <el-input size="mini" placeholder="请输入名称" v-model="companyName" style="width: 95%;" class="ipt-filter"></el-input>
                    <!-- <el-button size="mini" style="background: #2d476e;border: #2d476e;color:#fff;">筛选</el-button> -->
                <!-- </div> -->
                <ul class="ul-unprocessed-list">
                    <li v-for="(item,index) in filterOptionsList" :key="index" class="unprocessed-list" style="margin:5px" @click="findDevice(item)">
                        <div style="overflow:hidden;padding-left: 10px;width: 90%;text-overflow: ellipsis;white-space: nowrap;">名称：{{item.name}}({{item.deviceSn}})</div>
                        <!-- <div style="overflow:hidden;padding-left: 10px;text-overflow: ellipsis;white-space: nowrap;color: #bdbdbd;font-size: 12px;">SN号：{{item.deviceSn}}</div> -->
                        <div style="overflow:hidden;padding-left: 10px;color: #bdbdbd;font-size: 12px;">更新时间：{{item.updateTime}}</div>
                    </li>
                </ul>
            </div>
            </div>
        </el-col>
    </el-row>
    <el-dialog :title="dialogMsg.body.content" :visible.sync="undoneVisible" class="msg-pop" >
        <div style="color:#fff;">
            <div>内容：{{dialogMsg.body.content}}</div>
            <div v-if="dialogMsg.body.imageList.length>0">
                <img v-for="(item,index) in dialogMsg.body.imageList" :key="index" :src="item" style="width: 200px;height: 200px;margin: 5px;" alt="">
            </div>
            <div>地址：{{dialogMsg.body.address}}</div>
            <div v-if="dialogMsg.body.contacts">联系方式：{{dialogMsg.body.address}}</div>
            <div>时间：{{dialogMsg.createTime}}</div>
        </div>
        <div slot="footer" class="dialog-footer">
            <!-- <el-button @click="undoneVisible = false">取 消</el-button> -->
            <el-button type="primary" style="background-color: #2d476e;border: 1px #2d476e;" @click="undoneVisible = false">确 定</el-button>
        </div>
    </el-dialog>
</div>
</section>
</template>

<script>
import echarts from "echarts";
import EcharComponent from './echarComponent.vue'
import { device_location_track_query,device_query,user_querycompany,device_my,conversation_query, message_query } from '../../api/api' 
export default{
    components:{
        EcharComponent
    },
    data(){
        return{
            testlist:new Array(10).fill(1).map((s, i) => ({ xh: i + 1, label: "hello wrold" })),
            pickerOptions: {
                shortcuts: [{
                    text: '最近一小时',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000);
                    picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近一天',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            trajectory: [],
            options:[],
            firmlist:[],
            companyId:'',
            trajectorys:'',
            selData:'',
            filters:{
                startTime:null,
                endTime:null
            },
            device_mylist:'',//校巴在线离线情况
            watchList:'',//手表在线离线情况
            processedList:'',//未处理工单列表
            unprocessedList:'',//已处理工单列表
            processedNum: null, //未处理工单数量
            unprocessedNum: null, //已处理工单数量
            showMapNum:1,//展示哪个地图 0-轨迹 1-点
            undoneVisible: false,//弹窗
            dialogMsg:{
                body:{
                    imageList:[]
                }
            },//点击未处理问题后获得的数据
            timer:'',
            pointMap:'',//设备点的地图
            onlineState:'',//在线离线状态
            drawingManager:'',
            rangpointlist:'',//过滤的数组
            showrange: true,//是否显示电子围栏
            rangeList:[],
            companyName:'',//设备名称(右侧筛选用)
            filterOptionsList:[],//右侧设备筛选过后的数组
        }
    },
    mounted(){
        this.getCompanyList()
        this.getUserList()
        this.publicmy(220);
        this.publicmy(219);
        // this.map();
        this.getOrder(0)
        this.getOrder(1)
        this.intervalCheck()
    },
    // destroyed(){
    //     clearInterval(this.timer)
    // },
    computed:{    
        allProcessedNum(){
            // 工单总数
            return this.processedNum + this.unprocessedNum
        },
        orderList(){
            return {
                offlineCount: this.processedNum,
                onlineCount: this.unprocessedNum,
                totalCount: this.processedNum + this.unprocessedNum
            }
        }
    },
    watch:{
        companyId:{
            immediate: true,
            handler(newval,oldval){
                console.log(newval)
                // console.log(oldval)
                this.rangpointlist = this.firmlist.filter((p)=>{
                    return p.companyId.indexOf(newval) !== -1
                })
            }
        },
        companyName:{
            //右边输入框筛选设备
            immediate: true,
            handler(newval,oldval){
                console.log(newval)
                this.filterOptionsList = this.options.filter((p)=>{
                    return p.name.indexOf(newval) !== -1
                })
            }
        }
    },
    methods:{
        //点击右侧列表的某个设备,地图跳转到哪个设备
        findDevice(item){
            // console.log(item);
            this.pointMap.clearOverlays()
            this.allDeviceMap(item.deviceLocation.latitude,item.deviceLocation.longitude)
        },
        //控制是否显示电子围栏
        changeShowRange(){
            this.pointMap.clearOverlays()
            this.devicePoint()
        },
        //定时查询
        intervalCheck(){
            let _this = this
            _this.timer = setInterval(()=>{
                // this.getCompanyList()
                _this.getUserList()
                _this.publicmy(220);
                _this.publicmy(219);
                _this.getOrder(0)
                _this.getOrder(1)
            },60000)
        },
        //获取未处理数据的详情（主要是图片）
        getUndoneDetile(row){
            let para = {
                conversationId: row.conversationId,
            };
            message_query(para).then(res=>{
                console.log(res)
                this.dialogMsg = res.data.list[0]
                this.dialogMsg.body = JSON.parse(this.dialogMsg.body)
            })
        },
        // 选择显示哪个地图
        selectMap(e){
            // console.log(this.showMapNum)
            // console.log(e)
            this.getUserList()
            if(e == 1){
                this.intervalCheck()
            }else if(e == 0){
                clearInterval(this.timer)
            }
        },
        //显示未处理问题详情窗口
        showDetail(row){
            // console.log(row)
            this.dialogMsg = {
                body:{
                    imageList:[]
                }
            }
            this.undoneVisible = true
            this.getUndoneDetile(row)
            // this.dialogMsg = row
        },
        // 百分比计算
        percentageCount(num,Allnum){
            //num：当前计算数 Allnum：总数
            if(num==0 && Allnum == 0){
                return 0
            }else{
                return (num * 100 / Allnum).toFixed(2);
            }
        },
        //获取工单列表
        getOrder(state) {
            //state：0未处理，state：1已处理
            let para = {
                state: state,
            };
            conversation_query(para).then((res) => {
                // console.log('===============res=========================',res)
                if(state == 0){
                    this.processedNum = res.data.totalCount;
                    this.processedList = res.data.list;
                }else if(state == 1){
                    this.unprocessedNum = res.data.totalCount;
                    this.unprocessedList = res.data.list;
                }
            });
        },
        //组织列表筛选
        select_scade1(e){
            this.companyId = e
            this.getUserList()
        },
        //获取组织列表
        getCompanyList(){
            let para = {
                companyId: this.companyId
            }
            user_querycompany(para).then((res) => {
                this.begCode(res.code, res.message);
                this.firmlist = res.data.list;
                this.rangpointlist = res.data.list;
            });
        },
        //日期筛选
        second1() {
            if (this.selData) {
                this.filters.startTime = this.getdata(this.selData[0]);
                this.filters.endTime = this.getdata(this.selData[1]);
            } else {
                this.filters.startTime = '';
                this.filters.endTime = '';
            }
            this.trackGet();
        },
        //转换日期格式的方法
        getdata(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            var second = date.getSeconds();
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        },
        //获取设备列表
        getUserList(){
            console.log(this.showMapNum)
            let para1 = {
                pageNo: 1,
                pageSize: 2000,
                moving: 1,
                companyId: this.companyId,
                miniLev:3,
                state: this.onlineState
            }
            device_query(para1).then((res) => {
                this.begCode(res.code, res.message);
                this.options = res.data.list;
                this.filterOptionsList = res.data.list;//过滤数组
                if(this.showMapNum==0){
                    let that = this
                    setTimeout(() => {
                        that.map();
                    }, 300);
                }else if(this.showMapNum==1){
                    if(this.pointMap){
                        this.pointMap.clearOverlays()
                        this.devicePoint()
                    }else{
                        this.allDeviceMap()
                    }
                }
            });
        },
        //查询多选设备的路线
        trackGet() {
            this.trajectory = [];
            if(this.showMapNum == 0){
                for (let i in this.trajectorys) {
                    let parays = {
                        deviceId: this.trajectorys[i],
                        pageNo: 1,
                        pageSize: 999,
                        startTime: this.filters.startTime,
                        endTime: this.filters.endTime
                    };
                    console.log(this.trajectorys[i])
                    device_location_track_query(parays).then((res) => {
                        this.begCode(res.code, res.message);
                        this.trajectory.push(res.data.list);
                        this.map();
                    })
                }
            }else{
                this.getUserList()
            }
        },
        //绘制地图
        map() {
            let _this = this;
            let longitude = 114.753297;//河源
            let latitude = 23.795719;
            if (this.trajectory[0]) {
            if (this.trajectory[0].length > 0) {
                longitude = this.trajectory[0][0].longitude;
                latitude = this.trajectory[0][0].latitude;
            }
            }
            if (!longitude) {
                longitude = 114.05207707540185;
            }
            if (!latitude) {
                latitude = 22.73163396596424;
            }
            let map = new BMap.Map(_this.$refs.allmap1); // 创建Map实例
            var mapStyle = {
                features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
                style: "midnight",
            };
            var point = new BMap.Point(longitude, latitude);
            // map.centerAndZoom(point, 5);//5公里范围
            map.centerAndZoom(point, 15);
            map.setMapStyle(mapStyle);
            map.enableScrollWheelZoom();
            map.setCurrentCity("北京");
            /* 创建地图并添加控件end  */
            var colorList = [
            '#00ff9c', '#FCCE10', '#E87C25', '#27727B','#FE8463',
            '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD','#D7504B', 
            '#C6E579', '#F4E001', '#F0805A', '#26C0C0','#dfdfdf'
            ];
            console.log(this.trajectory)
            for (let i in this.trajectory) {
                var points = [];
                console.log(this.trajectory[i]);
                if (this.trajectory[i].length > 0) {
                    var nameSn = {
                        name: this.trajectory[i][0].name,
                        sn: this.trajectory[i][0].deviceSn,
                        address: this.trajectory[i][0].address,
                        createTime: this.trajectory[i][0].createTime,
                        deviceTypeId: this.trajectory[i][0].deviceTypeId,
                        state: this.trajectory[i][0].state,
                    };
                    var address=[];
                    for (let j in this.trajectory[i]) {
                    let addr = this.wgs84togcj02(this.trajectory[i][j].longitude,this.trajectory[i][j].latitude)
                    addr = this.gcj02tobd09(addr[0],addr[1])
                    points.push([addr[0],addr[1],this.trajectory[i][j].address,this.trajectory[i][j].createTime,this.trajectory[i][j].name]);
                    //轨迹图点击事件地址
                    address.push({
                    name: this.trajectory[i][j].name,
                    sn: this.trajectory[i][j].deviceSn,
                    address: this.trajectory[i][j].address,
                    createTime: this.trajectory[i][j].createTime,
                    })

                    }
                    // console.log(nameSn)
                    // console.log(address)
                    // console.log(points)
                    this.showPolyLine(points, colorList[i], map, nameSn)
                }
            }
        },
        //连成线
        showPolyLine(points, color, map, nameSn,address) {
            // console.log(points);
            var pLine = [];
            var opts = {
                width: 180, // 信息窗口宽度
                height: 120, // 信息窗口高度
                title: nameSn.name, // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: nameSn.sn
            }
            var opts2 = {
                width: 180, // 信息窗口宽度
                height: 120, // 信息窗口高度
                title: nameSn.address, // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: nameSn.createTime
            }
            var opts1 ={}
            console.log(points)
            for (let i in  points) {
            pLine.push(new BMap.Point(points[i][0], points[i][1],points[i][2], points[i][3],points[i][4]));
            
            var myIcon = new BMap.Icon(//初始化终点坐标图标
                "",
                new BMap.Size(45, 45), {
                // anchor: new BMap.Size(20, 45), //这句表示图片相对于所加的点的位置mapStart
                // offset: new BMap.Size(-10, 45), // 指定定位位置
                // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                });
            var myIcon2 = new BMap.Icon(
                '',
                new BMap.Size(45, 45), {
                anchor: new BMap.Size(27, 13)
            }); //初始化起点坐标图标
            let num = new BMap.Point(points[i][0],points[i][1]);
            opts1 = {
                width: 180, // 信息窗口宽度
                height: 120, // 信息窗口高度
                title: points[i][2], // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: points[i][3]
            }
            var myIcon3
            // if(nameSn.deviceTypeId == 217){//校车
            if(nameSn.deviceTypeId == 220){//大巴
                if(nameSn.state==1){//在线
                    myIcon3 = new BMap.Icon( 
                        "",
                        new BMap.Size(45, 45), {
                        // anchor: new BMap.Size(5, 5),
                        imageOffset: new BMap.Size(0, 10),
                        }
                    );
                }else{//离线
                    myIcon3 = new BMap.Icon( 
                        "",
                        new BMap.Size(45, 45), {
                        // anchor: new BMap.Size(5, 5),
                        imageOffset: new BMap.Size(0, 10),
                        }
                    );
                }
            }else if(nameSn.deviceTypeId == 219){//手表
                if(nameSn.state==1){//在线
                    myIcon3 = new BMap.Icon( 
                        "",
                        new BMap.Size(45, 45), {
                        // anchor: new BMap.Size(5, 5),
                        imageOffset: new BMap.Size(0, 10),
                        }
                    );
                }else{//离线
                    myIcon3 = new BMap.Icon( 
                        "",
                        new BMap.Size(45, 45), {
                        // anchor: new BMap.Size(5, 5),
                        imageOffset: new BMap.Size(0, 10),
                        }
                    );
                }
            }else{//其他
                myIcon3 = new BMap.Icon( 
                    "",
                    new BMap.Size(45, 45), {
                    // anchor: new BMap.Size(5, 5),
                    imageOffset: new BMap.Size(0, 10),
                    }
                );
            }
            
            if (i == 0) { //起点终点图标
                // console.log(myIcon)
                let  marker = new BMap.Marker(new BMap.Point(points[i][0],
                points[i][1]), {
                    icon: myIcon
                })
                map.addOverlay(marker);
                marker.addEventListener("mouseover", () => {
                var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象   
                map.openInfoWindow(infoWindow, num); // 打开信息窗口
                });
                marker.addEventListener("mouseout", () => {
                map.closeInfoWindow()
                })
                marker.addEventListener("click", () => {
                // console.log(i);
                var infoWindow = new BMap.InfoWindow(opts2.message, opts2); // 创建信息窗口对象   
                map.openInfoWindow(infoWindow, num); // 打开信息窗口

                });
            } else if (i == points.length - 1) {

            let  marker = new BMap.Marker(new BMap.Point(points[i][0],points[i][1]), {
                icon: myIcon2
                })
                map.addOverlay(marker);
                // console.log(i);
                let opts3 = {
                    width: 180, // 信息窗口宽度
                    height: 120, // 信息窗口高度
                    title: points[i][2], // 信息窗口标题
                    enableMessage: true, //设置允许信息窗发送短息
                    message: points[i][3]
                }
                marker.addEventListener("mouseover", () => {

                var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象   
                map.openInfoWindow(infoWindow, num); // 打开信息窗口

                });
                marker.addEventListener("mouseout", () => {
                    map.closeInfoWindow()
                })
                
                marker.addEventListener("click", () => {
                // console.log(opts1);
                var infoWindow = new BMap.InfoWindow(opts3.message, opts3); // 创建信息窗口对象   
                map.openInfoWindow(infoWindow, num); // 打开信息窗口

                });
            }else{
                
            let  marker = new BMap.Marker(new BMap.Point(points[i][0],
                points[i][1]), {
                icon: myIcon3
                })
                
                map.addOverlay(marker);
                marker.addEventListener("click", () => {
                console.log(points);

                opts1 = {
                    width: 180, // 信息窗口宽度
                    height: 120, // 信息窗口高度
                    title: '名称：'+points[i][4], // 信息窗口标题
                    enableMessage: true, //设置允许信息窗发送短息
                    message: `
                    <div>地址：${points[i][2]}</div>
                    <div>时间：${points[i][3]}</div>
                    ` 
                }
                var infoWindow = new BMap.InfoWindow(opts1.message, opts1); // 创建信息窗口对象  
                // var infoWindow = new BMap.InfoWindow(points[i][2], points[i][3]); // 创建信息窗口对象   
                map.openInfoWindow(infoWindow, num); // 打开信息窗口

                });
            }
            

            }
            /* points[][]数据结构为二维数组，这里转换为Marker，再将多个marker点放入pline，组成一条线  end */


            /* 添加轨迹接口begin */
            var polyline = new BMap.Polyline(pLine, {
            strokeColor: color,
            // strokeWeight: 6,
            strokeWeight: 2,
            strokeOpacity: 0.8
            });
            // console.log(points)
            
            map.addOverlay(polyline);
      },
    //   查询在线离线情况
      publicmy(deviceTypeId) {
        //deviceTypeId，保洁车定位传220，手表传219
        let para = {
            deviceTypeId: deviceTypeId
        }
        device_my(para).then((res) => {
            // console.log('=================deviceTypeId=======================',deviceTypeId)
            if(deviceTypeId==220){
                this.device_mylist = res.data;
            }else if(deviceTypeId==219){
                this.watchList = res.data;
            }
        });
      },
      //设备各点分布图
      allDeviceMap(lat,lng) {
        // console.log('============================我进来啦==============================')
        var th = this;
        let longitude = 114.753297;//河源
        let latitude = 23.795719;
        this.pointMap = new BMap.Map(this.$refs.allmap2); // 创建Map实例
        var mapStyle = {
        features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
        style: "midnight",
        };
        this.pointMap.setMapStyle(mapStyle);
        var pt1 
        // this.pointMap.centerAndZoom(pt1, 5);
        if(lat&&lng){
            console.log(lat,'-'+ lng)
            let addr = this.wgs84togcj02(lng,lat)
            let baiduAddr = this.gcj02tobd09(addr[0],addr[1])
            pt1 = new BMap.Point(baiduAddr[0],baiduAddr[1]);
            this.pointMap.centerAndZoom(pt1, 30);
        }else{
            pt1 = new BMap.Point(longitude,latitude);
            this.pointMap.centerAndZoom(pt1, 15);
        }
       
        let s = this.convert(pt1);
        this.pointMap.enableScrollWheelZoom();
        // console.log(this.options)
       
        this.devicePoint()

        // markerClusterer = new BMapLib.MarkerClusterer(this.pointMap, {
        //     markers: markers
        // });
        // markerClusterer.setMaxZoom(20);
        // markerClusterer.setMinClustrSize(15)//设置最小的聚合级别，小于该数量的不能成为一个聚合，默认为2
        // markerClusterer.setMaxZoom(15);//设置最大的聚合级别，大于该级别就不进行相应的聚合
 
       
        },
        
        //绘制数据的点
        devicePoint(){
            var markers = [];
            var myIcon
            // console.log(this.options)
            //  = new BMap.Icon(
            //     "",
            //     // new BMap.Size(25, 25), {
            //     new BMap.Size(12, 12), {
                
            //     });
            for (let i in this.options) {
                if(this.options[i].deviceTypeId == 220){//大巴
                    if(this.options[i].state==1){//在线
                        myIcon = new BMap.Icon( 
                            "",
                            new BMap.Size(45, 45), {
                            // anchor: new BMap.Size(5, 5),
                            imageOffset: new BMap.Size(0, 10),
                            }
                        );
                    }else{//离线
                        myIcon = new BMap.Icon( 
                            "",
                            new BMap.Size(45, 45), {
                            // anchor: new BMap.Size(5, 5),
                            imageOffset: new BMap.Size(0, 10),
                            }
                        );
                    }
                }else if(this.options[i].deviceTypeId == 219){//手表
                    if(this.options[i].state==1){//在线
                        if(this.options[i].remark && JSON.parse(this.options[i].remark).role == "security"){//安保人员
                            myIcon = new BMap.Icon( 
                                "",
                                new BMap.Size(20, 20), {}
                            );
                        }else if(this.options[i].remark && JSON.parse(this.options[i].remark).role == "driver"){//司机
                            myIcon = new BMap.Icon( 
                                "",
                                new BMap.Size(15, 15), {}
                            );
                        }else if(this.options[i].remark && JSON.parse(this.options[i].remark).role == "gardener"){//绿化人员
                            myIcon = new BMap.Icon( 
                                "",
                                new BMap.Size(15, 15), {}
                            );
                        }else{
                            myIcon = new BMap.Icon( 
                                "",                                
                                new BMap.Size(20, 20), {
                                // anchor: new BMap.Size(5, 5),
                                // imageOffset: new BMap.Size(0, 10),
                                }
                            );
                        }
                    }else{//离线
                        if(this.options[i].remark && JSON.parse(this.options[i].remark).role == "security"){//安保人员
                            myIcon = new BMap.Icon( 
                                "",
                                new BMap.Size(20, 20), {}
                            );
                        }else if(this.options[i].remark && JSON.parse(this.options[i].remark).role == "driver"){//司机
                            myIcon = new BMap.Icon( 
                                "",
                                new BMap.Size(15, 15), {}
                            );
                        }else if(this.options[i].remark && JSON.parse(this.options[i].remark).role == "gardener"){//绿化人员
                            myIcon = new BMap.Icon( 
                                "",
                                new BMap.Size(15, 15), {}
                            );
                        }else{
                            myIcon = new BMap.Icon( 
                                "",  
                                new BMap.Size(20, 20), {
                                // anchor: new BMap.Size(5, 5),
                                // imageOffset: new BMap.Size(0, 10),
                                }
                            );
                        }
                    }
                }
            if(this.options[i].deviceLocation==''||this.options[i].deviceLocation==null){
                // console.log(this.options[i])
                this.options[i].deviceLocation = {
                    longitude:0,
                    latitude:0
                }
            }
            if(this.options[i].deviceLocation.longitude<0||this.options[i].deviceLocation.latitude<0||
            this.options[i].deviceLocation.longitude==null||this.options[i].deviceLocation.latitude==null||
            this.options[i].deviceLocation.longitude==''||this.options[i].deviceLocation.latitude==''||
            this.options[i].deviceLocation.longitude==undefined||this.options[i].deviceLocation.latitude==undefined){     
                this.options[i].deviceLocation.longitude = 0
                this.options[i].deviceLocation.latitude = 0
                // console.log(i)
                // continue;
            }
            // 转换成百度坐标系
            let addr = this.wgs84togcj02(this.options[i].deviceLocation.longitude,this.options[i].deviceLocation.latitude)
            addr = this.gcj02tobd09(addr[0],addr[1])
            let pt = new BMap.Point(
                addr[0],
                addr[1]
            );

            // let s = this.convert(pt);
            // console.log(s)

            let marker = new BMap.Marker(pt, {
                icon: myIcon
            });

            
            this.pointMap.addOverlay(marker);

            let num = pt;

            num.lat = pt.lat;
            marker.addEventListener("mouseover", () => {
                console.log(this.options[i])
                var opts = {
                width: 200, // 信息窗口宽度
                height: 120, // 信息窗口高度
                title: '名称：'+this.options[i].name, // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: `
                <div>SN号：${this.options[i].deviceSn}</div>
                <div>地址：${this.options[i].deviceLocation.address}</div>
                <div>更新时间：${this.options[i].deviceLocation.updateTime}</div>
                ` 
                }
                var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象   
                this.pointMap.openInfoWindow(infoWindow, num); // 打开信息窗口

            });
            marker.addEventListener("mouseout", () => {
                this.pointMap.closeInfoWindow()
            })

            markers.push(marker);
             // console.log(markers)
            // debugger

            //描区域测试
            // let arrlist = [{
            //     lat:114.723674,lng:23.808136
            // },{
            //     lat:114.739772,lng:23.806441
            // },{
            //     lat:114.742359,lng:23.749561
            // },{
            //     lat:114.782028,lng:23.778401
            // },{
            //     lat:114.759319,lng:23.814376
            // },{
            //     lat:114.719319,lng:23.824376
            // }]
            // let arrlist = [{
            //     lat:114.719319,lng:23.824376
            // },{
            //     lat:114.723674,lng:23.808136
            // },{
            //     lat:114.739772,lng:23.806441
            // },{
            //     lat:114.742359,lng:23.749561
            // },{
            //     lat:114.759319,lng:23.814376
            // },{
            //     lat:114.782028,lng:23.778401
            // },]
            // arrlist = this.polygonSort(arrlist)
            // let newlist = []
            // for(let i in arrlist){
            //     newlist.push(new BMap.Point(arrlist[i].lat,arrlist[i].lng))
            // }
            // var polygon = new BMap.Polygon(newlist, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillColor:"#e49"});  //创建多边形
            // this.pointMap.addOverlay(polygon);
            }

            //电子围栏
            if(this.showrange){
                this.electronicFence()
            }
        },
        //电子围栏
        electronicFence(){
            this.rangeList = []
            var markerClusterer = null;
            console.log(this.rangpointlist)
            if(this.rangpointlist.length > 0){
                //显示电子围栏
                for(let i in this.rangpointlist){//循环所有组织
                    let pointlist = []
                    if(this.rangpointlist[i].attr3){
                        let jsonList = JSON.parse(this.rangpointlist[i].attr3)[0]
                        // console.log(jsonList);
                        // if(jsonList.range.length>0){
                            for(let k in jsonList.range){
                                pointlist.push(new BMap.Point(jsonList.range[k].lng,jsonList.range[k].lat))
                            }
                            // console.log(pointlist);
                            // console.log(jsonList);
                            var polygon = new BMap.Polygon(pointlist, jsonList.styleOptions);  //创建多边形
                        // }

                        // 地图右边阴影框显示的电子围栏信息（名称，颜色等）
                        if(jsonList.range.length>0){   
                            let msg = {
                                rangeStyle: jsonList.styleOptions, //围栏样式
                                name: this.rangpointlist[i].name,
                            }
                            this.rangeList.push(msg)
                        }
                    }
                    this.pointMap.addOverlay(polygon);      
                }   
                console.log(this.rangeList);
            }
        },
        //范围点排序
        polygonSort(list){
            let polyList =  list.sort((a,b)=>{
                return a.lat - b.lat
            })
            // console.log(polyList)
            return polyList
        }
    }
}
</script>

<style scoped>
.box {
  height: 300px;
}
.list {
  padding: 0 10px;
  width: 300px;
  
}
.list .item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    cursor: pointer;
    
  }
.list .item:hover {
    background-color: #95a5a6;
}
.device_item_list {
    color: #fff;
    width: 100%;
    margin-bottom: 5px;
  }

  .device_item_list span {
    display: inline-block;
    text-indent: 10px;
    font-size: 12px;
  }
  .content-background{
    position: relative;
    background-size: 100%;
    padding: 2% 10px ;
    /* min-height: 300px; */
    /* min-height: 22vh; */
    /* height: 28vh; */
    background-position: top, bottom;
    background-image: url(../../assets/01.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    float: left;
    width: 90%;
  }
  .content-background2{
    /* background: #08304b; */
    background: rgba(8,48,74,0.8);
    overflow: hidden;
  }
  .content-padding{
    padding: 0 20px;
  }
  .unprocessed-list{
    text-align: left;
    display: inline-block;
    width: 100%;
    margin: 10px 0;
    border-bottom: 1px dashed;
    padding-bottom: 10px;
    cursor: pointer;
  }
  .ul-unprocessed-list{
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
  }
  .ul-unprocessed-list::-webkit-scrollbar{ 
    width:10px;
    }

    .ul-unprocessed-list::-webkit-scrollbar-thumb{
    background: #10507e;
    border-radius:10px;
    }

    .ul-unprocessed-list::-webkit-scrollbar-thumb:hover{
    background: #10507e;
    }
    .jobs{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
    }
    .jobname{
        font-size: 12px;
        margin-left: 15px;
    }
    .color-block{
        display: inline-block;
        width: 20px;
        height: 10px;
        border-radius: 4px;
        opacity: .3;
    }
</style>